import Vue from 'vue'
import Vuex from 'vuex'
import { get } from '@/utils/http'

// 以插件的方式注入到Vue类中
Vue.use(Vuex)

// 得到vuex中的store对象
const store = new Vuex.Store({
  // 全局状态
  state: {
    num: 100,
    news: []
  },
  // 它就是vuex中的计算属性，专门用于获取state数据   有缓存，只要依赖项不发生改变就读缓存
  getters: {
    // 名称，一般情况下和state中的属性名称一样的
    // 形参 state就是 当前状态中的state数据
    // num()
    getNum(state) {
      return state.num > 103 ? state.num + '--保密@' : state.num
    }
  },
  // 使用mutations配置中的方法来完成地于state数据的修改，state是不能直接通过实例来修改
  // mutations要求必须是同步操作，不能异步，为了让devtools开发工具好去捕获操作动作
  mutations: {
    // state 当前状态的中state配置中的对象
    // payload 负荷，调用此方法时，你传入过来的数据 任意类型
    addNum(state, payload = 1) {
      state.num += payload
    }
  },
  // 异步操作
  actions: {
    // store当前的实例对象
    // payload调用此方法时，传过来的数据
    // actionNum(store, payload) {
    async actionNum({ commit }, payload) {
      // console.log(store, payload)
      // 进行网络请求得到接口中要累加的数值
      let ret = await get('/mock/num.json')
      // 在action中得到数据，交给mutation来完成对于state数据的更改
      commit('addNum', ret.data.num)
    }
  }
})

export default store
